<template>
  <div class="ang-box">
    <div id="aaa"></div>
    <div id="bbb"></div>
    <div id="ccc"></div>
    <div id="ddd"></div>
  </div>
</template>
<script>
import lottie from "lottie-web"
export default {
  data() {
    return {}
  },
  mounted() {
    this.initdt()
    this.initdt1()
    this.initdt2()
    this.initdt3()
  },
  methods: {
    initdt() {
      lottie.loadAnimation({
        container: document.getElementById("aaa"), // Required
        path: "/src/json/测试.json", // Required
        renderer: "svg", // Required
        loop: true, // Optional
        autoplay: true // Optional
      })
    },
    initdt1() {
      lottie.loadAnimation({
        container: document.getElementById("bbb"), // Required
        path: "/src/json/测试一.json", // Required
        renderer: "svg", // Required
        loop: true, // Optional
        autoplay: true // Optional
      })
    },
    initdt2() {
      lottie.loadAnimation({
        container: document.getElementById("ccc"), // Required
        path: "/src/json/测试二.json", // Required
        renderer: "svg", // Required
        loop: true, // Optional
        autoplay: true // Optional
      })
    },
    initdt3() {
      lottie.loadAnimation({
        container: document.getElementById("ddd"), // Required
        path: "/src/json/测试三.json", // Required
        renderer: "svg", // Required
        loop: true, // Optional
        autoplay: true // Optional
      })
    }
  }
}
</script>
<style scoped lang="less">
.ang-box {
  display: flex;
}
#aaa {
  width: 500px;
  height: 500px;
  // background-color: red;
}
#bbb {
  width: 500px;
  height: 500px;
  // background-color: red;
}
#ccc {
  width: 500px;
  height: 500px;
  // background-color: red;
}
#ddd {
  width: 500px;
  height: 500px;
  // background-color: red;
}
</style>
